<style lang="less" scoped>
.login {
    .jumb {
        background-color: #1b88ed;
        height: 2.1rem;
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        h1 {
            font-size: 32px;
            color: #ffffff;
            font-weight: 300;
        }
        &::after {
            content: "";
            display: block;
            position: absolute;
            background-color: #fff;
            border-radius: 50%;
            width: 120%;
            left: -10%;
            height: 60px;
            bottom: -40px;
        }
    }

    .form {
        margin: 0 0.2rem;
        padding-top: 0.2rem;
    }
    .row {
        display: flex;
        align-items: center;
        height: 0.3rem;
        border-bottom: 1px solid #f1f1f1;
        padding: 0.1rem 0;
        margin-top: 0.15rem;
        > div {
            height: 100%;
        }
        .icon {
            width: 36px;
            display: flex;
            align-items: center;
            img {
                display: block;
                height: 18px;
            }
        }
        .input {
            flex: 1;
            input {
                display: block;
                width: 100%;
                height: 100%;
                border: none;
                outline: none;
                font-size: 0.16rem;
            }
        }
        .more {
            width: 40px;
            display: flex;
            align-items: center;
        }
    }
    .authcode {
        .more {
            width: 100px;
            text-align: right;
            justify-content: flex-end;
            img {
                display: block;
                height: 31px;
            }
        }
    }

    .submit {
        background-color: #1b88ed;
        height: 50px;
        font-size: 0.18rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        margin-top: 0.35rem;
    }
}
</style>
<template>
    <div class="pageview login">
        <div class="jumb">
            <h1>移动运营</h1>
        </div>
        <div class="form">
            <div class="row">
                <div class="icon">
                    <img src="@/assets/icon/icon_pphone.png" alt />
                </div>
                <div class="input">
                    <input type="text" placeholder="请输入电话号码" v-model="username" />
                </div>
                <div class="more"></div>
            </div>
            <div class="row">
                <div class="icon">
                    <img src="@/assets/icon/icon_pwd.png" alt />
                </div>
                <div class="input">
                    <input type="password" placeholder="请输入密码" v-model="password" />
                </div>
                <div class="more"></div>
            </div>
            <div class="row authcode" v-show="showCheckCode">
                <div class="icon">
                    <img src="@/assets/icon/icon_ckd.png" alt />
                </div>
                <div class="input">
                    <input type="text" placeholder="请输入验证码" v-model="authcode" />
                </div>
                <div class="more">
                    <img :src="checkImg" >
                </div>
            </div>
            <div class="submit" @click="clickLogin">登录</div>
        </div>
    </div>
</template>
<script>
import { Userinfo } from "@/storage";
import { login } from "@/api";
export default {
    data() {
        return {
            username: "10000",
            password: "1234567aA",
            authcode: "",
            checkImg: "",
            showCheckCode: !false
        };
    },
    methods: {
        clickLogin() {
            var data = {
                username: this.username,
                password: this.password,
                authcode: this.authcode
            }
            login(data)
            .then(res => {
                if (res.code == 1) {
                    Userinfo(res.data);
                    this.$router.back();
                } else {
                    this.showCheckCode = true;
                    this.checkImg = "/api/system/Captcha/verify?r=" + Math.random()
                }
            })
        },
    },
    mounted() {}
};
</script>
